<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数字华容道</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="main">
    <div class="board-container">
        <div class="game-header" id="game_header">
            <button class="header-btn" id="btn_next">下一步</button>
            <button class="header-btn" id="btn_play">自动演示</button>
        </div>
        <table id="board_elem" class="board">
            <!-- 通过JS动态生成棋盘 -->
        </table>
        <div class="info-bar">
            <span>⚡ <span id="step-count">0</span> 步</span>
            <span>🟨 <span id="block-count">0</span> 块</span>
            <span>⏰ <span id="timer">0:00</span></span>
        </div>
    </div>

    <aside class="settings-section">
        <div class="settings">
            <h2>游戏设置</h2>
            <div class="setting-item">
                <label for="n_rows_control">行数</label>
                <input type="number" id="n_rows_control" min="2" max="150">
            </div>
            <div class="setting-item">
                <label for="n_cols_control">列数</label>
                <input type="number" id="n_cols_control" min="2" max="150">
            </div>
            <div class="setting-item">
                <label for="difficulty_control">难度</label>
                <select id="difficulty_control">
                    <option value="easy">简单</option>
                    <option value="medium" selected>中等</option>
                    <option value="hard">困难</option>
                </select>
            </div>

            <button class="btn" id="btn_random">随机重置</button>
            <button class="btn" id="btn_manual">手动设置</button>
            <button class="btn" id="btn_replay">重玩本局</button>
            <button class="btn" id="btn_solve">智能求解</button>

            <!--<div class="playback-controls">
                <button id="btn-prev" class="control-btn" title="上一步">
                    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"
                         stroke-linecap="round" stroke-linejoin="round">
                        <polygon fill="none" points="19 20 9 12 19 4 19 20"></polygon>
                        <line fill="none" x1="5" y1="19" x2="5" y2="5"></line>
                    </svg>
                </button>
                <button id="btn-play" class="control-btn" title="自动演示">
                    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"
                         stroke-linecap="round" stroke-linejoin="round">
                        <polygon fill="none" points="5 3 19 12 5 21 5 3"></polygon>
                    </svg>
                </button>
                <button id="btn-next" class="control-btn" title="下一步">
                    <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"
                         stroke-linecap="round" stroke-linejoin="round">
                        <polygon fill="none" points="5 4 15 12 5 20 5 4"></polygon>
                        <line fill="none" x1="19" y1="5" x2="19" y2="19"></line>
                    </svg>
                </button>
            </div>-->
        </div>
    </aside>
</main>
<script src="scripts.js"></script>
</body>
</html>